<!--
 * @Description: 
 * @Author: HuRrongChao
 * @Date: 2025-01-14 16:17:16
 * @LastEditors: HuRrongChao
 * @LastEditTime: 2025-01-16 10:42:15
-->
<!-- canvas简单版本，无碰撞检测、与弹幕复杂交互功能 -->
<template>
  <canvas ref="barrageCanvasRef" class="barrage-content__canvas"></canvas>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { Barrages } from './class/barrages'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  options: {
    type: Object,
    default: () => ({
      color: '#cccccc',
      fontSize: 26,
      speed: 1
    })
  },
  videoDom: {
    type: [String, Element],
    default: ''
  }
})

const barrageCanvasRef = ref()

const barragse = ref() // 弹幕

// 弹幕播放
const playBarrage = () => {
  barragse.value.isPlay = true
  barragse.value.render()
}

// 弹幕暂停
const pauseBarrage = () => {
  barragse.value.pause()
}

const initBarrage = () => {
  if (barragse.value && barragse.value.pause) pauseBarrage()
  let video = ''
  const data = props.data
  const options = props.options
  const canvas = barrageCanvasRef.value
  if (typeof(props.videoDom) === 'boolean') {
    video = document.getElementById(props.videoDom)
  } else {
    video = props.videoDom
  }
  barragse.value = new Barrages({
    canvas,
    video,
    data,
    ...options
  })
}

// 点击发送，插入数据
// submit.addEventListener('click', () => {
//   option.time = video.currentTime;
//   barragse.setBarrage(option)
//   ipt.value = ''
// })

// ipt.addEventListener('change', (event) => {
//   option.value = event.target.value;
// })
// colorIpt.addEventListener('change', (event) => {
//   option.color = event.target.value;
// })
// fontIpt.addEventListener('change', (event) => {
//   option.fontSize = +event.target.value;
// })

defineExpose({
  playBarrage,
  pauseBarrage,
  initBarrage
})
</script>

<style scoped>
.barrage-content__canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>